<template>
  <div class="container-tabBar">
    <van-tabbar v-model="active" focusedIcon-color="#FF7744" @change="onChange" router safe-area-inset-bottom>
      <van-tabbar-item v-for="(item, index) in data" :icon="item.icon" :to="item.path" :key="index">
        <span class="title" :style="{ color: active == index ? '#FF7744' : '#000000' }">{{ item.name }}</span>
        <template #icon>
          <img class="icon" :src="active == index ? item.focusedIcon : item.normalIcon" />
          <img v-if="item.rightIcon && !hideNew" class="bagde" :src="item.rightIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
const active = ref(0);
defineProps({
  showNewIcon: {
    type: Boolean,   // 先不用
    default: true
  },
});
watch(() => route.path, (newVal) => {
  switch (newVal) {
    case '/equityCenter':
      active.value = 1
      break;
    case '/cesCenter':
      active.value = 0
      break;
  }
}, { immediate: true });
const data = ref([]);
data.value = JSON.parse(window.sessionStorage.getItem("TAB_DATA"))
const emit = defineEmits(['onChange'])
const hideNew = ref(false)
const onChange = () => {
  emit('onChange');
  hideNew.value = true;
};
</script>

<style lang="less" scoped>
.container-tabBar {
  .title {
    opacity: 0.6;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }

  .icon {
    width: 28px;
    height: 28px;
  }

  .bagde {
    width: 22px;
    height: 11px;
    position: absolute;
    top: 0;
    left: 28px;
  }

  .van-tabbar {
    padding-top: 9px;
    padding-bottom: 35px;
    height: 35px;
  }
}
</style>